<template>
    <div class="order-detail-wrap">
        <!-- 提交订单页/包裹详情页 -->
        <template v-if="pageType == 0 || pageType == 2">
            <div class="goods-wrap" id="submit-order">
                <ol class="cart-table-header">
                    <li class="flex2 first-li">
                        <p>商品信息</p>
                    </li>
                    <li class="flex1" style="opacity: 0">单价</li>
                    <li class="flex1">金额</li>
                    <li class="flex1">数量</li>
                    <li class="flex1">小计</li>
                </ol>
                <div class="cart-table-body">
                    <div class="cart-table-th flex" v-for="(item, index) in goodsList" :key="index">
                        <div class="goods-info flex flex2">
                            <div class="goods-img">
                                <base-img :src="item.order_goods_item.goods_image" v-if="pageType == 2"></base-img>
                                <base-img :src="item.goods_images" v-else></base-img>
                            </div>
                            <div class="goods-name-wrap">
                                <p class="goods-name">{{ item.goods_name || item.order_goods_item.goods_name }}</p>
                            </div>
                        </div>
                        <div class="goods-attr flex1">
                            <p v-if="pageType == 0">{{ item.skuInfo.spec_value_names}}</p>
                            <p v-if='pageType == 1'>{{ item.good_sku_name}}</p>
                            <p v-if='pageType == 2'>{{ item.order_goods_item.good_sku_name}}</p>
                        </div>
                        <!-- <span class="goods-price flex1">￥{{ item.goods_price || item.order_goods_item.goods_price }}</span> -->
                        <span class="goods-price flex1" v-if="pageType == 0">￥{{ item.skuInfo.goods_price }}<i v-if="item.skuInfo.goods_unit">/{{item.skuInfo.goods_unit}}</i></span>
                        <span class="goods-price flex1" v-if="pageType == 2">￥{{ item.order_goods_item.goods_price }}<i v-if="item.order_goods_item.goods_unit">/{{item.order_goods_item.goods_unit}}</i></span>
                        <div class="number-box-wrap flex flex1">
                            <div class="no-stock">x{{ item.total_num || item.order_goods_item.total_num }}</div>
                        </div>
                        <span class="total-price flex1">￥<i>{{ item.total_price || item.order_goods_item.total_price}}</i></span>
                    </div>
                </div>
                <div class="total-wrap flex">
                    <p v-if="pageType == 0">已选<span>{{ stylesNum }}</span>款商品，共{{ totalNum }}件</p>
                    <p v-if="pageType == 2">共<span>{{ totalNum }}</span>件</p>
                    <p>合计：<i>￥</i><span>{{ totalPrice }}</span></p>
                </div>
            </div>
        </template>
        <!-- 订单详情页 -->
        <template v-if="pageType == 1">
            <!-- 已取消,待审核，审核不通过 -->
            <div class="goods-wrap" id="submit-order" v-if="orderStatus == -1 || orderStatus == 0 || orderStatus == 2">
                <ol class="cart-table-header">
                    <li class="flex2 first-li">
                        <p>商品信息</p>
                    </li>
                    <li class="flex1" style="opacity: 0">单价</li>
                    <li class="flex1">金额</li>
                    <li class="flex1">数量</li>
                    <li class="flex1">小计</li>
                </ol>
                <div class="cart-table-body">
                    <div class="cart-table-th flex" v-for="(item, index) in goodsList" :key="index">
                        <div class="goods-info flex flex2">
                            <div class="goods-img">
                                <base-img :src="item.order_goods_item.goods_image" v-if="pageType == 2"></base-img>
                                <base-img :src="item.goods_image" v-else></base-img>
                            </div>
                            <div class="goods-name-wrap">
                                <p class="goods-name">{{ item.goods_name || item.order_goods_item.goods_name }}</p>
                            </div>
                        </div>
                        <div class="goods-attr flex1">
                            <p v-if="pageType == 0">{{ item.skuInfo.spec_value_names}}</p>
                            <p v-if='pageType == 1'>{{ item.good_sku_name}}</p>
                            <p v-if='pageType == 2'>{{ item.order_goods_item.good_sku_name}}</p>
                        </div>
                        <span class="goods-price flex1">￥{{ item.goods_price}}<i v-if="item.goods_unit">/{{item.goods_unit}}</i></span>
                        <div class="number-box-wrap flex flex1">
                            <div class="no-stock">x{{ item.total_num || item.order_goods_item.total_num }}</div>
                        </div>
                        <span class="total-price flex1">￥<i>{{ item.total_price || item.order_goods_item.total_price}}</i></span>
                    </div>
                </div>
                <div class="total-wrap flex">
                    <p>共<span>{{ totalNum }}</span>件</p>
                    <p>合计：<i>￥</i><span>{{ totalPrice }}</span></p>
                </div>
            </div>
            <!-- 待配送，配送中，已完成 -->
            <template v-else>
                <div class="goods-wrap" v-for="(item,index) in supplyOrder" :key="index" id="2">
                    <div class="package-top-wrap flex">
                        <h1>包裹 {{ item.supply_order_no }}</h1>
                        <span class="status-act">
                            <template v-if='item.status == 10'>待配送</template>
                            <template v-if='item.status == 20'>配送中</template>
                            <template v-if='item.status == 30'>已完成</template>
                        </span>
                    </div>
                    <ol class="cart-table-header">
                        <li class="flex2 first-li">
                            <p>商品信息</p>
                        </li>
                        <li class="flex1" style="opacity: 0">单价</li>
                        <li class="flex1">金额</li>
                        <li class="flex1">数量</li>
                        <li class="flex1">小计</li>
                    </ol>
                    <div class="cart-table-body">
                        <div class="cart-table-th flex" v-for="(goodsItem, goodsIndex) in item.orderSupplyGoods" :key="goodsIndex">
                            <div class="goods-info flex flex2">
                                <div class="goods-img">
                                    <base-img :src="goodsItem.order_goods_item.goods_image"></base-img>
                                </div>
                                <div class="goods-name-wrap">
                                    <p class="goods-name">{{ goodsItem.order_goods_item.goods_name }}</p>
                                </div>
                            </div>
                            <div class="goods-attr flex1">
                                <p>{{ goodsItem.order_goods_item.good_sku_name}}</p>
                            </div>
                            <span class="goods-price flex1">￥{{ goodsItem.order_goods_item.goods_price }}<i v-if="goodsItem.order_goods_item.goods_unit">/{{goodsItem.order_goods_item.goods_unit}}</i></span>
                            <div class="number-box-wrap flex flex1">
                                <div class="no-stock">x{{ goodsItem.order_goods_item.total_num }}</div>
                            </div>
                            <span class="total-price flex1">￥<i>{{ goodsItem.order_goods_item.total_price }}</i></span>
                        </div>
                    </div>
                    <div class="total-wrap flex">
                        <p>共<span>{{ item.pick_nums }}</span>件</p>
                        <p>合计：<i>￥</i><span>{{ item.total_price }}</span></p>
                        <el-button round class="package-btn" @click="toPackageDetail(item.supply_order_id)">查看包裹</el-button>
                    </div>
                </div>
            </template>
        </template>
        <!-- 订单信息 -->
        <ul class="order-info-wrap" v-if='pageType == 1' id="222222222">
            <template v-if="orderStatus > 0">
                <li class="flex">
                    <span>商品金额</span>
                    <span class="total-price">￥<em>{{ totalPrice }}</em></span>
                </li>
                <li class="flex">
                    <span>商品数量</span>
                    <span>{{ totalNum }}件</span>
                </li>
            </template>
            <li class="flex">
                <span>下单时间</span>
                <span>{{ orderTime }}</span>
            </li>
            <li class="flex">
                <span>订单编号</span>
                <span>{{ orderNumber }}<i @click="copy(orderNumber)">复制</i></span>
            </li>
            <li class="flex" v-if="orderStatus == 2">
                <span>审核说明</span>
                <span>{{ applyRefuseReason }}</span>
            </li>
        </ul>
        <ul class="order-info-wrap" v-if='pageType == 2'>
            <template>
                <li class="flex">
                    <span>商品金额</span>
                    <span class="total-price">￥<em>{{ totalPrice }}</em></span>
                </li>
                <li class="flex">
                    <span>商品数量</span>
                    <span>{{ totalNum }}件</span>
                </li>
                <li class="flex">
                    <span>包裹状态</span>
                    <span class="status-act">
                        <template v-if='orderStatus == 10'>待配送</template>
                        <template v-if='orderStatus == 20'>配送中</template>
                        <template v-if='orderStatus == 30'>已完成</template>
                    </span>
                </li>
                <li class="flex" v-if='orderStatus != 10'>
                    <span>司机-{{ driver.contact }}</span>
                    <span>{{ driver.phone }}<i @click="copy(driver.phone)">复制</i></span>
                </li>
                <li v-if="orderStatus == 20">
                    <div id="yzMap"></div>
                    <!-- <baidu-map class="bm-view" :zoom="zoom" @ready="handler" :center="center" :scroll-wheel-zoom="true" ak="kw93GYEHXBsVA8NrYpytKhmwqqnSEdj0">
                        <template v-if="showMap">
                            <bm-marker v-for="(marker,index) in mapData.markers" :key="index" :position="{lng: marker.lng, lat: marker.lat}" :icon="{
          url: require('@/assets/img/circle.png'),
          size: { width: 16, height: 16 },
        }">
                                <bm-label :content="marker.label" :labelStyle="labelStyle" @ready="logItemWidths"
                                          :offset="{width:-offsetArr[index],height:20}" />
                            </bm-marker>
                        </template>

                    </baidu-map> -->

                </li>
            </template>
        </ul>
    </div>

</template>

<script>
import BaseImg from './BaseImg.vue';
import { BaiduMap } from 'vue-baidu-map';
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue';
import BmLabel from 'vue-baidu-map/components/overlays/Label.vue';
import { baiDuMapKey } from '@/api/base';
import urlObj from "@/utils/baseUrl.js";
export default {
    components: { BaseImg, BaiduMap, BmMarker, BmLabel },
    name: "OrderDetail",
    props: {
        goodsList: Array,
        stylesNum: [String, Number],
        totalNum: Number,
        totalPrice: String,
        orderTime: String,
        orderNumber: String,
        orderStatus: [String, Number],
        supplyOrder: Array,
        driver: Object,
        applyRefuseReason:String,
        pageType: {
            type: Number,
            default: 0,//0 --- 提交订单  1 -- 订单详情  2 -- 包裹详情
        },
        mapData: Object,//包裹详情地图展示数据
    },
    data() {
        return {
            zoom: 0,
            center: '',
            labelStyle: {
                color: '#333',
                fontSize: '12px',
                border: 0,
                padding: "6px 10px",
                borderRadius: '4px',
                boxShadow: '0 6px 12px 2px rgba(0, 0, 0, 0.3)'
            },
            mapMarkerIcon: require('@/assets/img/circle.png'),
            offsetArr: [],
            showMap: false,
            map: {}
        };
    },
    mounted() {
        if (this.orderStatus == 20) {
            this.getBaiDuMapKey();
            setTimeout(() => {
                this.showMap = true;
                this.initMap()
            }, 500)
        }
    },
    // created
    methods: {
        initMap() {
            const that = this;
            // vue项目需要先声明 T = window.T，不然后面无法获取到。
            var T = window.T;
            this.map = new T.Map('yzMap'); // div的id
            console.log('mapData', this.mapData);
            // 传参中心点经纬度，以及放大程度，最小1，最大18
            this.map.centerAndZoom(new T.LngLat(this.mapData.markers[1].lng, this.mapData.markers[1].lat), 12);
            this.mapData.markers.forEach((v, i) => {
                const point = new T.LngLat(v.lng, v.lat);
                const icon = new T.Icon({
                    iconUrl: that.mapMarkerIcon, //引入图标
                    iconSize: new T.Point(15, 15), //图标可视区域的大小。
                    // offset: new T.Point(-16, -16),
                });
                const marker = new T.Marker(point, {
                    icon: icon
                })
                this.map.addOverLay(marker);
                let label = new T.Label({
                    text: v.label,
                    position: point,
                })
                this.map.addOverLay(label);
                label.setOffset(new T.Point(-(label._labelWidth / 2 + 8), 26))
            })
        },
        getBaiDuMapKey() {
            baiDuMapKey().then(res => {
                if (res.code == 0) {
                    let script = document.createElement('script');
                    script.type = 'text/javascript'
                    script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${res.data}`
                    document.body.appendChild(script)
                }
            })
        },
        handler({ BMap, map }) {
            var view = map.getViewport(eval(this.mapData.markers))
            this.zoom = view.zoom;
            this.center = view.center;
            setTimeout(() => {
                this.logItemWidths()
            }, 500)
        },
        logItemWidths(point, v, i) {
            this.$nextTick(() => {
                const elements = document.getElementsByClassName("tdt-label");
                let elementsWidthArr = []
                for (var i = 0; i < elements.length; i++) {
                    const element = elements[i];
                    const elementW = element.offsetWidth;
                    const elementCenterW = elementW / 2;
                    elementsWidthArr.push(elementCenterW)
                }
                elementsWidthArr.shift();
                this.offsetArr = elementsWidthArr;
            });
        },
        copy(text) {
            navigator.clipboard
                .writeText(text)
                .then(() => {
                    this.$message.success("复制成功");
                })
                .catch((err) => {
                    // 复制失败
                    console.error("复制失败");
                });
        },
        toPackageDetail(id) {
            this.$router.push(`/order/package_detail/${id}`)
        }

    },
};
</script>
<style lang="scss" scoped>
.goods-wrap {
    width: 100%;
    padding: 0px 24px 15px;
    box-sizing: border-box;
    background: #f7f9fa;
    border-radius: 8px;
    margin-top: 12px;
    .package-top-wrap {
        padding: 12px 0;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e1e1e1;
        h1 {
            font-weight: bold;
            font-size: 14px;
        }
        span {
            // padding-left:20px;
        }
    }
}
.status-act {
    color: #4facf8;
}
.order-info-wrap {
    width: 100%;
    padding: 20px 16px;
    box-sizing: border-box;
    background: #f7f9fa;
    border-radius: 8px;
    margin-top: 12px;
    li {
        justify-content: space-between;
        margin-bottom: 24px;
        align-items: center;
        &:last-of-type {
            margin-bottom: 0;
        }
        i {
            color: var(--main-color);
        }
        .total-price {
            color: #ff4401;
            font-family: "DIN-BOLD";
            em {
                font-size: 24px;
            }
        }
    }
}

.flex3 {
    flex: 3;
}

.flex2 {
    flex: 2;
    // background-color: red;
}

.flex1 {
    flex: 1;
    // background-color: blue;
}
// header
.cart-table-header {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    li {
        text-align: center;
        font-size: 14px;
        font-weight: bold;
    }

    .first-li {
        text-align: left;
        p {
            // width: 100%;
            padding-left: 12px;
        }
    }
}

.cart-table-body {
    margin-top: 12px;
    .cart-table-th {
        width: 100%;
        height: 64px;
        box-sizing: border-box;
        margin-bottom: 24px;
        font-size: 14px;
        .goods-img {
            width: 64px;
            height: 64px;
            border-radius: 6px;
            overflow: hidden;
            margin: 0 20px 0 0;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .goods-name-wrap {
            flex: 1;
            overflow: hidden;
            .goods-name {
                width: 100%;
                height: 40px;
                color: #323233;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .goods-attr {
            color: #9c9c9c;
            font-size: 12px;
            p {
                width: 100%;
                padding: 0 10px;
                box-sizing: border-box;
            }
        }
        .goods-price {
            color: #9c9c9c;
            text-align: center;
        }

        .number-box-wrap {
            position: relative;
            .number-box {
                width: 130px;
                height: 36px;
                border-radius: 6px;
                border: 1px solid #d8d8d8;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: auto;
                .handles {
                    width: 36px;
                    height: 36px;

                    img {
                        width: 10px;
                        height: 10px;
                    }
                }

                .input-box {
                    width: 58px;
                    height: 36px;

                    input {
                        width: 100%;
                        height: 100%;
                        font-size: 14px;
                        text-align: center;
                    }
                }
            }
        }
        .total-price {
            text-align: center;
            color: #ff6a01;
            font-family: "DIN-BOLD";
            i {
                font-size: 16px;
            }
        }
    }
    .cart-table-th-no {
        background: #fff9f8;
    }
    .no-stock {
        width: 100%;
        color: #9c9c9c !important;
        text-align: center;
    }
}
.total-wrap {
    border-top: 1px solid #e1e1e1;
    padding-top: 10px;
    justify-content: flex-end;
    align-items: center;
    font-size: 16px;
    p {
        margin-left: 14px;
    }
    span {
        font-size: 20px;
        color: #ff4401;
        font-family: "DIN-BOLD";
    }
    i {
        font-size: 14px;
        color: #ff4401;
        font-family: "DIN-BOLD";
    }
    .package-btn {
        margin-left: 10px;
    }
}
.bm-view {
    width: 100%;
    height: 480px;
    border-radius: 8px;
    overflow: hidden;
}
#yzMap {
    width: 100%;
    height: 480px;
    border-radius: 8px;
    overflow: hidden;
}
::v-deep .tdt-label {
    color: #333;
    font-size: 12px;
    border: 0;
    padding: 0px 10px;
    border-radius: 4px;
    box-shadow: 0 6px 12px 2px rgba(0, 0, 0, 0.3);
}
</style>